@import 'theme';
@import 'functions';
@import 'mixins';

//cx-cart-item color variables
$cx-cart-item-code-color: 'secondary' !default;
$cx-cart-item-old-price-color: 'secondary' !default;
$cx-cart-item-new-price-color: 'primary' !default;
$cx-cart-item-promo-color: 'success' !default;
$cx-cart-item-unavailable-color: 'danger' !default;
$cx-cart-item-actions-color: 'text' !default;
$cx-cart-item-name-color: 'text' !default;
$cx-cart-item-name-color-hover: 'primary' !default;

$cx-cart-item-image-container-padding-left: 0 !default;
$cx-cart-item-image-container-padding-right: 0 !default;

$cx-cart-item-info-container-margin-left: 0 !default;
$cx-cart-item-info-container-margin-right: 0 !default;

$cx-cart-item-name-padding-left: 0 !default;
$cx-cart-item-name-padding-right: 0 !default;

$cx-cart-item-image-width: 100% !default;

$cx-cart-item-code-padding: 0.625rem 0 !default;

$cx-cart-item-property-label-padding-right: 1rem !default;
$cx-cart-item-property-label-min-width: 5rem !default;

$cx-cart-item-price-label-min-width: 5rem !default;
$cx-cart-item-price-old-padding-right: 1rem !default;

$cx-cart-item-quantity-label-min-width: 5rem !default;

$cx-cart-item-promo-padding-left: 0 !default;
$cx-cart-item-promo-padding-right: 0 !default;
$cx-cart-item-promo-padding-top: 0.75rem !default;
$cx-cart-item-promo-padding-bottom: 0.75rem !default;
$cx-cart-item-promo-margin-bottom: 0 !default;

$cx-cart-item-total-label-min-width: 5rem !default;
$cx-cart-item-total-value-padding-right: 0 !default;

$cx-cart-item-availability-padding: 0.75rem 0 !default;
$cx-cart-item-availability-margin-bottom: 0 !default;

$cx-cart-item-actions-padding-right: 0 !default;
$cx-cart-item-actions-padding-left-sm: 0 !default;

$cx-cart-item-compact-label-min-width: 5rem !default;

.cx-cart-item {
  &__image {
    width: $cx-cart-item-image-width;
  }

  &__info-container {
    @include media-breakpoint-down(sm) {
      display: flex;
      flex-direction: column;
    }
  }

  &__name {
    @include type('5');
    overflow-wrap: break-word;
    padding-left: $cx-cart-item-name-padding-left;
    padding-right: $cx-cart-item-name-padding-right;

    &--link {
      @include var-color('color', $cx-cart-item-name-color);
      text-decoration: none;

      &:hover {
        @include var-color('color', $cx-cart-item-name-color-hover);
      }
    }
  }

  &__code {
    @include type('7');
    @include var-color('color', $cx-cart-item-code-color);
    padding: $cx-cart-item-code-padding;
  }

  &__property {
    display: flex;

    &--label {
      @include type('8');
      overflow-wrap: break-word;
      padding-right: $cx-cart-item-property-label-padding-right;

      @include media-breakpoint-down(sm) {
        min-width: $cx-cart-item-property-label-min-width;
      }
    }

    &--value {
      @include type('7');
      overflow-wrap: break-word;
    }
  }

  &__price {
    display: flex;
    justify-content: center;
    align-items: center;

    @include type('5');
    font-weight: $font-weight-normal;

    @include media-breakpoint-down(sm) {
      justify-content: flex-start;
    }

    &--label {
      overflow-wrap: break-word;

      @include media-breakpoint-down(sm) {
        @include type('8');
        min-width: $cx-cart-item-price-label-min-width;
      }
    }

    &--value {
      @include type('5');
      font-weight: $font-weight-normal;
      overflow-wrap: break-word;

      @include media-breakpoint-down(sm) {
        @include type('7');
      }
    }

    &--old {
      text-decoration: line-through;
      @include var-color('color', $cx-cart-item-old-price-color);
      padding-right: $cx-cart-item-price-old-padding-right;
    }
    &--new {
      @include var-color('color', $cx-cart-item-new-price-color);
    }
  }

  &__quantity {
    display: flex;
    justify-content: center;
    align-items: center;

    @include media-breakpoint-down(sm) {
      justify-content: flex-start;
    }

    &--label {
      overflow-wrap: break-word;

      @include media-breakpoint-down(sm) {
        @include type('8');
        min-width: $cx-cart-item-quantity-label-min-width;
      }
    }

    &--value {
      @include type('5');
      font-weight: $font-weight-normal;
      overflow-wrap: break-word;

      @include media-breakpoint-down(sm) {
        @include type('7');
      }
    }
  }

  &__total {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    @include media-breakpoint-down(sm) {
      justify-content: flex-start;
    }

    &--label {
      overflow-wrap: break-word;

      @include media-breakpoint-down(sm) {
        @include type('8');
        min-width: $cx-cart-item-total-label-min-width;
      }
    }

    &--value {
      @include type('5');
      font-weight: $font-weight-normal;
      overflow-wrap: break-word;
      padding-right: $cx-cart-item-total-value-padding-right;

      @include media-breakpoint-down(sm) {
        @include type('7');
      }
    }
  }

  &__promo {
    @include type('8');
    @include var-color('color', $cx-cart-item-promo-color);
    padding-left: $cx-cart-item-promo-padding-left;
    padding-right: $cx-cart-item-promo-padding-right;
    padding-top: $cx-cart-item-promo-padding-top;
    padding-bottom: $cx-cart-item-promo-padding-bottom;
    margin-bottom: $cx-cart-item-promo-margin-bottom;
  }

  &__availability {
    @include type('8');
    @include var-color('color', $cx-cart-item-unavailable-color);
    padding: $cx-cart-item-availability-padding;
    margin-bottom: $cx-cart-item-availability-margin-bottom;
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    padding-right: $cx-cart-item-actions-padding-right;

    @include media-breakpoint-down(sm) {
      display: flex;
      justify-content: flex-start;
      padding-left: $cx-cart-item-actions-padding-left-sm;
    }

    a {
      @include type('8');
      @include var-color('color', $cx-cart-item-actions-color);
      text-decoration: underline;
    }
  }
}

// ------------------------------------COMPACT VERSION STYLING------------------------------------------

.cx-cart-item--compact {
  display: flex;
  flex-direction: row;

  .cx-cart-item {
    &__image-container {
      padding-left: $cx-cart-item-image-container-padding-left;
      padding-right: $cx-cart-item-image-container-padding-right;
    }

    &__info-container {
      display: flex;
      flex-direction: column;
      margin-left: $cx-cart-item-info-container-margin-left;
      margin-right: $cx-cart-item-info-container-margin-right;
    }

    &__property {
      &--label {
        min-width: $cx-cart-item-compact-label-min-width;
      }
    }

    &__price,
    &__quantity,
    &__total,
    &__actions {
      justify-content: flex-start;

      &--label {
        @include type('8');
        min-width: $cx-cart-item-compact-label-min-width;
      }

      &--value {
        @include type('7');
      }
    }

    &__actions {
      padding-left: 0;
    }
  }
}
